import type { FC } from 'react';
import type { StateType } from './model'
import type { Dispatch } from 'umi';
import { useEffect } from 'react';
import { connect } from 'umi';
import { Card, List } from 'antd';
import { CardListItem } from './data.d';
import styles from './style.less';

interface CardListProps {
  cardlistmodel: StateType;
  dispatch: Dispatch;
  loading: boolean;
}

export const CardList: FC<CardListProps> = (props) => {
  const {
    loading,
    dispatch,
    cardlistmodel: { list }
  } = props;

  useEffect(() => {
    dispatch({
      type: 'cardlistmodel/fetch'
    })
  }, [1])

  return(
    <List<CardListItem>
      rowKey="id"
      loading={loading}
      grid={{
        gutter: 16,
        xs: 1,
        sm: 2,
        md: 3,
        lg: 3,
        xl: 4,
        xxl: 4,
      }}
      dataSource={list}
      renderItem={(item) => (
        <List.Item>
          <Card className={styles.card} hoverable cover={<img alt={item.title} src={item.cover} />}>
            <Card.Meta
              title={item.title}
              description={
                <div style={{textAlign: 'right'}}>
                  <span>{item.subDescription}</span>
                </div>
              }
            />
          </Card>
        </List.Item>
      )}
    />
  )
}

export default connect(
  ({
    cardlistmodel,
    loading
  }: {
    cardlistmodel: StateType;
    loading: {
      models: Record<string, boolean>;
    }
  }) => ({
    cardlistmodel,
    loading: loading.models.list
  })
)(CardList)